import React from "react";
import { Button, Alert, Typography } from "antd";

const { Text } = Typography;

const Update = (props) => {
  const {
    updateMessage,
    moreUrl,
    downloadUrl,
    downloadCrxUrl,
    onMoreClick,
    onDownloadClick,
    onDownloadCrxClick,
    downloading,
  } = props;

  console.log(props);
  return (
    <div>
      <div className="message-area">
        <span>
          {updateMessage || "قىستۇرمىنىڭ نەشىرى يىڭىلاندى ،ۋاقتىدا يىڭىلىۋېلىڭ"}
        </span>
      </div>
      <div
        className="button-area"
        style={{
          marginTop: "10px",
          textAlign: "center",
          fontSize: "18px",
        }}
      >
        {downloadUrl && (
          <Button
            style={{ marginLeft: "5px", padding: "4px 5px" }}
            key="download"
            danger
            loading={downloading}
            onClick={(e) => onDownloadClick && onDownloadClick(e)}
          >
            چۈشۈرۈش (zip.)
          </Button>
        )}
        {downloadCrxUrl && (
          <Button
            key="download_crx"
            danger
            loading={downloading}
            onClick={(e) => onDownloadCrxClick && onDownloadCrxClick(e)}
          >
            چۈشۈرۈش (crx.)
          </Button>
        )}
        {moreUrl && (
          <div
            key="more"
            style={{
              marginTop: "20px",
              fontSize: "14px",
              cursor: "pointer",
            }}
          >
            <Text
              onClick={(e) => onMoreClick && onMoreClick(e)}
              type="success"
              style={{ color: "#c0b9b9" }}
            >
              تەپسىلاتىنى كۆرۈش
            </Text>
          </div>
        )}
      </div>
    </div>
  );
};

const UpdateComponent = (props) => {
  const {
    updateMessage,
    moreUrl,
    downloadUrl,
    downloadCrxUrl,
    onMoreClick,
    onDownloadClick,
    onDownloadCrxClick,
    downloading,
  } = props;

  return (
    <div style={{ margin: "20px 10px" }}>
      <Alert
        className="ant-alert-rtl"
        message="ئەسكەرتىش"
        description={
          <Update
            updateMessage={updateMessage}
            moreUrl={moreUrl}
            downloadUrl={downloadUrl}
            downloadCrxUrl={downloadCrxUrl}
            onMoreClick={(e) => onMoreClick && onMoreClick(e)}
            onDownloadClick={(e) => onDownloadClick && onDownloadClick(e)}
            onDownloadCrxClick={(e) =>
              onDownloadCrxClick && onDownloadCrxClick(e)
            }
            downloading={downloading || false}
          />
        }
        type="warning"
        showIcon
        closable
      />
    </div>
  );
};

export default UpdateComponent;
